<template>
    <div class="headerbox">
  <div class="header">
    <div class="headerL">
      <a onclick="javascript:history.back(-1)" class="goback"><img src="/assets/images/goback.png" /></a>
    </div>
    <div class="headerC0">
      <div class="ssdiv">
        <img src="/assets/images/ss.png" /><input name="" type="text" placeholder="输入关键字..."/>
      </div>
    </div>
    <div class="headerR">
      <a><img src="/assets/images/tr.png" @click="onType" /></a>
    </div>
  </div>
</div>
<div class="clear"></div>
<div class="shopType">
  <van-dropdown-menu>
    <van-dropdown-item v-model="flag"    :options="option1" @change="onFlag" />
    <van-dropdown-item v-model="OrderBy" :options="option2" @change="onOrderBy" />
</van-dropdown-menu>

</div>
<div class="clear"></div>
<div class="hbox"></div>
<div class="mainWarp" style="background:#f3f3f3">
  <ul class="proul" v-if="ProData.length > 0">
    <li v-for="item of ProData" :key="item.id">
      <router-link :to="{path:'/product/product/info',query:{proid:item.id}}"><img :src="item.cover_cdn"/></router-link>
      <router-link :to="{path:'/product/product/info',query:{proid:item.id}}"><p class="tit">{{item.name}}</p></router-link>
      <div class="price" v-if="item.vip_price > 0">
        <p>￥{{item.vip_price}}<span>￥{{item.price}}</span></p>
      </div>
      <div class="price" v-else>
        <p>￥{{item.price}}</p>
      </div>    
    </li>
  </ul>
  <ul class="proul" v-else>
    <van-empty description="暂无商品" />
  </ul>
</div>
<div class="clear"></div>
<div class="h54"></div>
<div class="clear"></div>
<Menus />

<van-popup v-model:show="show" round position="bottom">
    <van-picker
        :columns="columns"
        @cancel="show = false"
        @confirm="onConfirm"
    />
  </van-popup>
</template>
<script>
import Menus from 'components/common/Menus.vue'
export default {
    components:{
        Menus
    },
    created() {
        let typeid = this.$route.query.typeid

        this.typeid = Number(typeid)

        this.Type()

        this.ProList()
    },
    data() {
        return {
            LoginUser:this.$cookies.get('LoginUser') ? this.$cookies.get('LoginUser') : {},
            typeid:0,
            show:false,
            flag:0,
            OrderBy:'id',
            ProData:[],
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新品商品', value: 1 },
                { text: '热销商品', value: 2 },
                { text: '推荐商品', value: 3 },
            ],
            option2: [
                { text: '默认排序', value: 'id' },
                { text: '价格排序', value: 'price' },
                { text: '库存排序', value: 'stock' },
            ],
            columns:[],
            TypeData:[]
        }
    },
    methods: {
        onType()
        {
            this.show = true
        },
        async Type()
        {
            let result = await this.$api.ProductType()

            // console.log(result)

            if(result.code === 1)
            {
                // let data = Array.from(result.data)
                // let data = Object.values(result.data)

                let data = []

                for(let item of result.data)
                {
                  data.push(item.name)
                }

                this.TypeData = result.data

                
                this.columns = data
            }
        },
        onChange()
        {

        },
        onCancel()
        {

        },
        onConfirm(item,index)
        {
            console.log(item)

            let data = this.TypeData[index]

            this.typeid = data.id

            this.show = false

            this.ProList()

        },
        async ProList()
        {
            let data = {
                typeid:this.typeid,
                userid:this.LoginUser.id,
                flag:this.flag,
                OrderBy:this.OrderBy
            }
            
            let result = await this.$api.ProductIndex(data)

            console.log(result);
            if(result.code === 1)
            {
                this.ProData = result.data
            }
        },
        onFlag(item)
        {
            // console.log(item)
            this.flag = item

            this.ProList()
        },
        onOrderBy(item)
        {
            this.OrderBy = item

            this.ProList()
        }
    },
}
</script>
<style scoped>
.mainWarp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: column-reverse;
}
</style>